@extends('home.public.master')
@section('content')
    <div class="main-container container" id="content">
        <ul class="breadcrumb">
            <li><a href="/"><i class="fa fa-home"></i></a></li>
            <li><a href="javascript:;">购物车</a></li>
        </ul>

        <div class="row">
            <!--Middle Part Start-->
            <div id="content" class="col-sm-12">
                <div class="table-responsive form-group">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <td class="text-center">选择</td>
                            <td class="text-center">商品图片</td>
                            <td class="text-left">商品名称</td>
                            <td class="text-left">属性</td>
                            <td class="text-left">数量</td>
                            <td class="text-right">单价</td>
                            <td class="text-right">总价</td>
                            <td class="text-right">操作</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(v,k) in cart">
                            <td><input class="select" type="checkbox" v-model="v.status" ></td>
                            <td class="text-center"><a href="product.html">
                                    <img width="70px" :src="v.get_goods.pictures[0]" alt="Aspire Ultrabook Laptop"
                                                                                title="Aspire Ultrabook Laptop"
                                                                                class="img-thumbnail"/></a></td>
                            <td class="text-left"><a
                                    href="product.html">@{{ v.get_goods.name }}</a><br/>
                            </td>
                            <td class="text-left">@{{v.attribute}}</td>
                            <td class="text-left" width="200px">
                                <div class="input-group btn-block quantity">
                                    <input type="text" name="quantity" v-model="v.number" size="1"
                                           class="form-control"/>
                                    <span class="input-group-btn">
                        <button @click="plus(v)" type="button" data-toggle="tooltip" class="btn btn-primary"><i
                                class="fa fa-plus"></i></button>
                        <button @click="minus(v)" type="button" data-toggle="tooltip" class="btn btn-danger" onClick=""><i
                                class="fa fa-minus"></i></button>
                        </span></div>
                            </td>
                            <td class="text-right">¥@{{ v.get_goods.price }}</td>
                            <td class="text-right">
                                ¥<span>@{{ v.get_goods.price*v.number }}</span>
                            </td>
                            <td class="text-right">
                                <h5 @click="del(k,v.id)"
                                    style="line-height: 16px; text-align: center ;margin-bottom: 5px;"><a
                                        style="color: black;" href="javascript:;">删除</a></h5>
                                <h5 @click="collect(v,'offCollect')" style="line-height: 16px; text-align: center" v-if="v.check_shoucang">
                                    <a style="color: black;" href="javascript:;" >取消收藏</a>
                                </h5>
                                <h5 @click="collect(v,'clickCollect')" style="line-height: 16px; text-align: center" v-else>
                                    <a style="color: black;" href="javascript:;">收藏</a>
                                </h5>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <h2 style="margin-left: 1200px;">总计: </h2>
                <h3 style="border: 1px solid #DDDDDD;width: 80px;height: 40px;margin-top: 10px;margin-bottom: 10px;margin-left: 1300px; line-height: 40px; text-align: center">¥@{{ total }}</h3>
                <div class="buttons">
                    <div class="pull-left"><a href="/" class="btn btn-info">继续逛</a></div>
                    <div class="pull-right"><a href="javascript:;" @click="settleAccounts()" class="btn btn-success">结算</a></div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        new Vue({
            el: '#content',
            data: {
                cart:{!! $carts!!},
            },
            computed:{
                //循环所有的购物车,给每个购物车加个状态
                goods(){
                    this.cart.forEach((v)=>{
                        v.status=false;
                    });
                    return this.cart;
                },
                //计算总价
                total(){
                    var total=0;
                    this.cart.forEach((v)=>{
                        if (v.status){
                            total+=v.get_goods.price*v.number;
                        }
                    })
                    return total;
                }
            },
            methods: {
                //提交订单
                settleAccounts(){
                var ids='';
                var total=0;
                this.cart.forEach((v)=>{
                    if (v.status){
                        ids+=v.id+',';
                        total+=v.get_goods.price*v.number;
                    }
                });
                ids=ids.substr(0,ids.length-1);
                if(ids){
                    location.href='/cart/cart/settleAccounts/'+ids+'/'+total;
                }else {
                    swal({
                        title:'请选择最少一个商品去结算',
                        type:'error'//提示框图标
                    });
                }
                },
                //收藏
                collect(v,type) {
                    axios.get('/collect/collect/'+type+'/' + v.get_goods.id).then((res) => {
                        console.log(res);
                        if (res.data.valid) {
                            v.check_shoucang = res.data.shoucang;
                            //表示添加收藏成
                            swal(
                                '',
                                res.data.message,
                                'success'
                            );
                        }else{
                            swal(
                                '',
                                res.data.message,
                                'error'
                            );
                        };
                    });
                },
                //商品数量加
                plus(v) {
                    axios.get('/cart/changNum/plus/' + v.id).then((res) => {
                        if (res.data.valid) {
                            v.number++;
                        } else {
                            swal(
                                '',
                                res.data.message,
                                'error'
                            );
                        };
                    });
                },
                minus(v) {
                    if (v.number > 1) {
                        axios.get('/cart/changNum/minus/' + v.id).then((res) => {
                            if (res.data.valid) {
                                v.number--;
                            } else {
                                swal(
                                    '',
                                    res.data.message,
                                    'error'
                                );
                            };
                        });
                    } else {
                        swal(
                            '',
                            '商品件数最少为1',
                            'error'
                        );
                    };
                },
                del(k, id) {
                    var This = this;
                    swal({
                        title: '确定删除吗？',
                        text: '你将无法恢复它！',
                        type: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: '确定删除！',
                    }).then(function (type) {
                        if (type.value) {
                            axios.get('/cart/deleteCart/' + id).then((res) => {
                                console.log(res);
                                if (res.data.valid) {
                                    // 将当前对应的购物车数据删除
                                    This.cart.splice(k, 1);
                                    swal(
                                        '',
                                        res.data.message,
                                        'success'
                                    );
                                };
                            });
                        };
                    });
                },
            },
        });
    </script>
@endpush

